<template>
    <div>
      <div class="left-nav" :class="{'is-publish':pageType==2}">
        <div class="hed-left">
          <a class="col-side-bar" @click="handleCollApseSidbar"></a>
          <a class="sys-logo" href="/">
            <img loading="lazy" :src="logoPic" class="dark-logo" alt="" />
          </a>
        </div>
        <template>
          <ul class="navs">
            <li v-for="(m,idx) in leftmenu" :key="idx" :class="[m.isdesc?'text-desc':'',m.isSplit?'split-empty':'',m.children?'pmenu':'',m.isnew?'is-new':'']">
                <template v-if="m.isai">
                  <a href="https://nv9yzrinr2z.feishu.cn/share/base/form/shrcn9YkP2UO3zt2lIy4rv1vAif" target="_blank" class="ai"></a>
                </template>
                <template v-else-if="m.isdesc">
                  特色专栏
                </template>
                <template v-else-if="m.children">
                  <a class="gmore">更多</a>
                  <div class="sub-menu">
                    <a v-for="(s,sdx) in m.children" :href="s.path" :key="sdx" :class="[s.classname,m.classname,curPathName==s.pathname?'active':'']">{{s.name}}</a>
                    <!-- <router-link to="/articles" class="wz">文章</router-link> -->
                  </div>
                </template>
                <template v-else-if="m.path">
                  <a :href="m.path" @click.prevent="toUrl(m)" :class="[(m.cirnum&&m.cirnum>0&&!m.hidecir)?'has-cir':'',m.classname,curPathName==m.pathname?'active':'']">{{m.name}}</a>
                </template>
            </li>
          </ul>
          <ul class="bot">
            <li class="contact-img-code">
              <a class="wx">
                <!-- <img loading="lazy" src="../assets/pro/leftNav/sina_icon.png" alt="" /> -->
                <div class="qr-codes">
                  <span>
                    <img loading="lazy" :src="configuration.wechatQrcode" alt="">
                    <i class="txt">微信公众号</i>
                  </span>
                  <span>
                    <img loading="lazy" :src="configuration.wechatGroupQrcode" alt="">
                    <i class="txt">官方微信群</i>
                  </span>
                </div>
              </a>
              <!-- <a class="sina" href="https://weibo.com/u/7505086917?is_all=1#_rnd1632663740881" target="_blank">
              </a> -->
              <a class="xiaohongshu" href="https://www.xiaohongshu.com/user/profile/62dff225000000001e01d99d" target="_blank">
              </a>
            </li>
            <li class="target-a">
              <router-link to="/about/aboutUs">关于我们</router-link>
              <router-link to="/about/businessCooperation">商业合作</router-link>
              <router-link to="/about/copyrightNote">版权</router-link>
            </li>
            <li class="target-a">
              <a @click="showFeedBack=true">意见反馈</a>
              <router-link to="/about/contactUs">联系我们</router-link>
            </li>
            <li class="target-a mt-10">
              <a>@gameui.net</a>
            </li>
            <li class="target-a">
              <a>沪ICP备2020027713号-3</a>
            </li>
          </ul>
          <!-- <ul class="collapse-nav">
            <li v-for="(m,idx) in leftmenu" :key="idx" :class="[m.isdesc?'text-desc':'',m.isSplit?'split-empty':'',m.children?'pmenu':'',m.isnew?'is-new':'']" v-if="m.isleaf">
              <a href="https://nv9yzrinr2z.feishu.cn/share/base/form/shrcn9YkP2UO3zt2lIy4rv1vAif" target="_blank" class="ai" v-if="m.isai">AI绘画</a>
              <a :href="m.path" @click.prevent="toUrl(m)" :class="[(m.cirnum&&m.cirnum>0&&!m.hidecir)?'has-cir':'',m.classname,curPathName==m.pathname?'active':'']" v-else>{{m.name}}</a>
            </li>
          </ul> -->
        </template>
        <template v-if="pageType==2">
          <div class="publish-nav-menus">
            <li :class="{ 'active': curPathName == item.pathname, 'split': item.isSplit }" v-for="(item, idx) in publishMenus" :key="idx">
              <template v-if="!item.isSplit">
                <router-link class="menu" :to="item.path">{{ item.name }}</router-link>
              </template>
            </li>
            <li><a class="menu" @click="showFeedBack=true">意见反馈</a></li>
          </div>
        </template>

        <!-- <FeedBack v-if="showFeedBack" @close="showFeedBack=false"/> -->
        <a-modal v-model="showFeedBack" destroyOnClose centered :footer="null"  :closable="false" width="670px">
          <FeedBack ref="refFeedBack" @close="showFeedBack=false"/>
        </a-modal>
    </div>
  </div>
</template>

<script>
import { mapState} from 'vuex'
import api from '@/api/api'
import FeedBack from '@/components/feedBack'
export default {
  components:{FeedBack},
  data() {
    return {
      logoPic:'',
      showFeedBack:false,
			configuration:{},
      yjForm:{
        type:1
      },
      pageType:1,
      leftNavs:[
        
      ],
      publishMenus: [
        { pathname: 'publishGame', name: '上传游戏截图', path: '/publish/publishGame' },
        { pathname: 'publishWork', name: '发布作品', path: '/publish/publishWork' },
        // { pathname: 'publishVideo', name: '发布短视频', path: '/publish/publishVideo' },
        { pathname: 'publishArticle', name: '写文章', path: '/publish/publishArticle' },
        { pathname: '', name: '', isSplit: true },
        { pathname: 'publishManage', name: '发布管理', path: '/publish/publishManage' },
        { pathname: 'publishFans', name: '粉丝管理', path: '/publish/publishFans' },
        { pathname: '', name: '', isSplit: true }
        // ,
        // {pathname:'',name:'意见反馈',path:'/publish/publishGame'}
      ]
    }
  },
  watch: {
    $route: function (to, from) {
        this.checkPath(to.path);
    }
  },
  computed: {
    ...mapState(['leftmenu']),
    curPathName: function () {
      return this.$route.name
    }
  },
  methods:{
    handleCollApseSidbar(){
        $('#app').removeClass('fix-sid-bar');
        document.body.style.overflow='inherit';
    },
    toUrl(route){
      if(localStorage.getItem('token'))
      {
        let uid=localStorage.getItem('userId');
        if(route.cirnum>0){
          if(route.cirmodulename=='CIR-BROWSE'&&!route.hidecir){
            localStorage.setItem('IS-FTED-CIR-MSG',true);
          }
          let key='UT-'+uid+'-'+route.cirmodulename;
          route.cirnum=0;
          localStorage.removeItem(key); 
        }
      }
      if(route.pathname==this.$route.name){
        $('body,html').animate({
          'scrollTop':0
        }, 0);
        setTimeout(()=>{
          location.reload();
        },300)
      }else{
        let routeData=this.$router.resolve({ path: route.path})
        window.open(routeData.href, '_self');
        // this.$router.replace({path:route.path})
      }
    },
    checkPath(_path){
        if(_path.indexOf('publish') > 0){
            this.pageType=2;
        }else if(_path.indexOf('personal') > 0||_path.indexOf('recruit') > 0||_path.indexOf('myRecruit') > 0){
            this.pageType=3;
        }
        else{
            this.pageType=1;
        }
    },
			async getConfiguration() {
				var that = this;
				let result=await api.configuration();
					if(result.data.logo){
            that.logoPic=result.data.logo;
						localStorage.setItem('LOGO-PIC',result.data.logo);
						this.$parent.$refs.gHeader.logoPic=result.data.logo;
					}else{
						result.data.logo=require('../assets/gameui_new_logo.png');
						localStorage.setItem('LOGO-PIC','../assets/logo2.png');
						this.$parent.$refs.gHeader.logoPic='../assets/logo2.png';
					}
					that.configuration = result.data;
			}
  },
  mounted() {
    this.$store.dispatch('setLeftMenu',[])
    let path=this.$route.path;
    this.checkPath(path);
    this.getConfiguration();
  }
}
</script>

<style lang="less">
.n-dialog-mask.opc-hid,.n-dialog-container.opc-hid{
    opacity:0;
    z-index:-1;
    transition:.1s all linear;
}

.n-dialog-mask.opc-show{
    opacity:1;
    z-index:102;
}
.n-dialog-container.opc-show{
    opacity:1;
    z-index:102;
}
.n-yjdialog-modal{
    // width:670px;
    height:532px;
    left:calc((100% - 670px) / 2);
    top:calc((100% - 532px) / 2);
    padding:20px 30px;
    .n-yj-form{
        margin-top:31px;
        .yj-upload-wrap{
            display: flex;
            flex-wrap: wrap;
            .yj-uploadbtn{
                width:100px;height:100px;
                // background:url('../assets/pro/yjuploadpic_ico.svg') no-repeat;
                background-size:40px 40px;
                background-position:center center;
                display: block;
                border:2px dashed #424242;
                border-radius:16px;
                margin-bottom:20px;
                .el-upload{
                    width:100%;
                    height:100%;
                }
                .el-upload-dragger{
                    background-color:#181818;
                    width:100%;
                    border:none;
                    height:100%;
                    // background:url('../../assets/pro/upload_cover.svg') no-repeat;
                  background:url('../assets/pro/yjuploadpic_ico.svg') no-repeat;
                    background-position:center;
                    background-size:40px 40px;
                }
            }
            .succ-data{
                width:100px;height:100px;
                border-radius:16px;
                overflow: hidden;
                position: relative;
                img{
                    width:100%;
                    height:100%;
                    object-fit: cover;
                }
                margin-left:20px;
                .remove{
                    width:24px;height:24px;
                    background:url('../assets/pro/yj_upload_remove.svg') no-repeat;
                    background-size:24px 24px;
                    position: absolute;
                    top:0px;right:0px;
                }
            }
        }
        .form-field{
            margin-bottom:20px;
            border-radius:8px;
            overflow: hidden;
            label{
                font-size:14px;
                color:#fff;
                margin-right:33px;
            }
            .el-radio__input .el-radio__inner{
                width:18px;height:18px;
                border-color:#424248;
                &:after{
                    width:6px;height:6px;
                    background:#23232A;
                }
            }
            .el-radio__input.is-checked .el-radio__inner{
                background:#11CCB1;
                border-color:#11CCB1;
            }
            .el-radio__input.is-checked+.el-radio__label{
                color:#fff;
            }
            &.textarea{
                textarea{
                    height:140px;
                    width:100%;
                    border:none;
                    background:#171719;
                    resize: none;
                    padding:10px 12px;
                    color:#fff;
                    font-size:14px;
                }
            }
            input[type="text"]{
                height:40px;
                padding-left:14px;
                border:none;
                width:100%;
                background:#171719;
                color:#fff;
                font-size:14px;
                padding-right:40px;
            }
        }
        .yj-foot-btns{
            text-align: right;
            font-size:16px;
            a{
                line-height: 40px;
                border-radius:8px;
                font-weight:500;
                display: inline-block;
                width:100px;
                user-select: none;
                text-align: center;
                transition:.1s all linear;
            }
            .cancel{
                background:#37363E;
                color:#fff;
                margin-right:15px;
            }
            .confirm{
                background:#11CCB1;
                color:#fff;
                &:hover {
                  background: #0fab94;
                }
            }
        }
    }
}
.n-dialog-header{
    text-align: center;
    font-size:16px;
    color:#fff;
    position: relative;
    .dialog-close{
        width:18px;height:18px;
        background:url('../assets/pro/close-win.svg') no-repeat;
        background-size:cover;
        // margin-right:10px;
        position: absolute;
        right:0px;
        transition:.1s all linear;
        top:4px;
        opacity:.8;
        &:hover{
          transform: rotate(180deg);
          opacity:1;
        }
    }
}
.publish-nav-menus {
  width: 180px;
  font-size: 14px;
  list-style-type: none;
  margin: 0 auto;
  // background: #181818;
  padding: 10px;
  border-radius: 16px;
  position: sticky;
  top:84px;
  li {
    margin-bottom: 10px;
    .menu {
      border-radius: 8px;
      line-height: 40px;
      text-align: center;
      display: inline-block;
      width: 100%;
      color: #fff;
      transition:.2s all linear;
      &:hover {
        background: #11CCB1;
        color: #fff;
      }
    }
    &.split {
      &:after {
        content: '';
        display: block;
        width: 42px;
        height: 1px;
        background: #323232;
        margin: 0 auto;
      }
    }
    &.active {
      .menu {
        background: #11CCB1;
        color: #fff;
      }
    }
  }
}
.left-nav {
  position: fixed;
  // left: calc((100% - 1920px) / 2);
  left:0px;
  top:84px;
  bottom:0px;
  z-index: 117;
  height:calc(100vh - 102px);
  direction: rtl;
  overflow-y:auto;
  overflow-x: hidden;
  overscroll-behavior: none;
  width:240px;
  .hed-left{
    align-items: center;
    padding-left:32px;
    min-width:240px;
    display: none;
    height:84px;
    .col-side-bar{
      min-width:32px;
      height:32px;
      max-width:32px;
      border-radius:9px;
      background-image:url('../assets/pro/collapse_menu.svg');
      background-repeat:no-repeat;
      background-position: center;
      background-size:20px;
      margin-right:7px;
      // margin-top:10px;
      transition:.1s all linear;
      &:hover{
        background-color:#242327;
      }
    }
  }
  &.is-publish{
    overflow-y:visible;
    overflow-x:visible;
    width:240px !important;
  }
  &:hover{
    &::-webkit-scrollbar {
        display: block;
        width: 6px;
        height: 6px;
    }
  }
  .navs {
    direction: ltr;
    width: 240px;
    li {
      padding-left: 41px;
      height: 46px;
      line-height: 46px;
      color: #969696;
      font-size: 16px;
      user-select: none;
      &.is-new{
        a{
          position: relative;
          &:after{
            width:32.15px;
            height:8.64px;
            content:'';
            right:-35px;
            top:18px;
            position: absolute;
            background:url('../assets/pro/menu_new.svg') no-repeat;
          }
        }
      }
      a {
        display: flex;
        align-items: center;
        color: #969696;
        transition:.2s all linear;
        width:max-content;
        &:hover{
          color:#fff;
        }
        &:before {
          content: '';
          background-position: left center;
          width: 19px;
          height: 18px;
          display: block;
          margin-right: 20px;
          transition:.1s all linear;
        }
        &.active{
          color:#11CCB1;
        }
        &.has-cir:after{
          content:'';
          width:6px;height:6px;
          background:#FF688C;
          border-radius:5px;
          margin-left:7px;
          margin-top:3px;
        }
      }
      .home {
        &:before {
          background: url('../assets/pro/leftNav/button_normal_home.svg') no-repeat;
          background-size:cover;
        }
        &.active:before {
          background: url('../assets/pro/leftNav/menu/active/button_press_home.svg') no-repeat;
          background-size:cover;
        }
      }
      .tj {
        &:before {
          background: url('../assets/pro/leftNav/button_normal_tj.svg') no-repeat;
          background-size:cover;
        }
        &.active:before {
          background: url('../assets/pro/leftNav/menu/active/button_press_tuijian.svg') no-repeat;
          background-size:cover;
        }
      }
      .ai{
        background:url('../assets/pro/ai_menubg.svg') no-repeat;
        display: inline-block;
        // height:100%;
        width:100%;
        // border:1px solid red;
        background-position:left center;
        position: relative;
        &:after{
          content:'';
          width:19.27px;
          height:20.22px;
          background:url('../assets/pro/icon_qxyy.svg') no-repeat;
          background-size:cover;
          display: block;
          position: absolute;
          top:-2px;
          left:95px;
        }
      }
      .at {
        &:before {
          background: url('../assets/pro/leftNav/button_normal_gz.svg') no-repeat;
          background-size:cover;
        }
        &.active:before {
          background: url('../assets/pro/leftNav/menu/active/button_press_follow.svg') no-repeat;
          background-size:cover;
        }
      }
      .fav {
        &:before {
          background: url('../assets/pro/leftNav/button_normal_sc.svg') no-repeat;
          background-size:cover;
        }
        &.active:before {
          background: url('../assets/pro/leftNav/menu/active/button_press_fav.svg') no-repeat;
          background-size:cover;
        }
      }
      .zan {
        &:before {
          background: url('../assets/pro/leftNav/button_normal_dz.svg') no-repeat;
          background-size:cover;
        }
        &.active:before {
          background: url('../assets/pro/leftNav/button_press_zan.svg') no-repeat;
          background-size:cover;
        }
      }
      .history {
        &:before {
          background: url('../assets/pro/leftNav/button_normal_jl.svg') no-repeat;
          background-size:cover;
        }
        &.active:before {
          background: url('../assets/pro/leftNav/menu/active/button_press_history.svg') no-repeat;
          background-size:cover;
        }
      }
      .yx {
        &:before {
          background: url('../assets/pro/leftNav/button_normal_yx.svg') no-repeat;
          background-size:cover;
        }
        &.active:before {
          background: url('../assets/pro/leftNav/menu/active/button_press_game.svg') no-repeat;
          background-size:cover;
        }
      }
      .jt {
        &:before {
          background: url('../assets/pro/leftNav/button_normal_jt.svg') no-repeat;
          background-size:cover;
        }
        &.active:before {
          background: url('../assets/pro/leftNav/menu/active/button_press_jietu.svg') no-repeat;
          background-size:cover;
        }
      }
      .dsp {
        &:before {
          background: url('../assets/pro/leftNav/button_normal_dsp.svg') no-repeat;
          background-size:cover;
        }
        &.active:before {
          background: url('../assets/pro/leftNav/menu/active/button_press_video.svg') no-repeat;
          background-size:cover;
        }
      }
      .zp {
        &:before {
          background: url('../assets/pro/leftNav/button_normal_zp.svg') no-repeat;
          background-size:cover;
        }
        &.active:before {
          background: url('../assets/pro/leftNav/menu/active/button_press_article.svg') no-repeat;
          background-size:cover;
        }
      }
      .gmore {
        &:before {
          background: url('../assets/pro/leftNav/button_normal_gd.svg') no-repeat;
          background-size:cover;
        }
      }
      
      .zhp:before{
        background:url('../assets/pro/icon-zhaipin.svg') no-repeat;
        background-size:cover;
      }
      .zhp.active:before{
        background: url('../assets/pro/icon-zhaopin-active.svg') no-repeat;
        background-size:cover;
      }
      .wz:before{
        background:url('../assets/pro/icon-wenzhang.svg') no-repeat;
        background-size:cover;
      }
      .wz.active:before{
        background: url('../assets/pro/icon-wenzhang_active.svg') no-repeat;
        background-size:cover;
      }
      .phb:before{
        background:url('../assets/pro/icon-paihang.svg') no-repeat;
        background-size:cover;
      }
      .phb.active:before{
        background: url('../assets/pro/icon-paihang-active.svg') no-repeat;
        background-size:cover;
      }
    }
    .split-empty {
      height: 1px;
      background: rgba(255,255,255,0.12);
      margin: 11px 39px 17px 39px;
    }
    .pmenu{
      position: relative;
      &:hover{
        .sub-menu{
          opacity:1;
          z-index:1;
          visibility: visible;
        }
      }
      .sub-menu{
        width:153px;
        position: absolute;
        top:40px;
        left:41px;background:#1C1C1E;
        padding:22px 26px;
        border-radius:16px;
        visibility:hidden;
        // animation: hdpanel .3s ease forwards;
        a{
          // display: inline-block;
          // width:100%;
          word-spacing:2rem;
          line-height:22px;
          margin-bottom:28px;
          &:last-child{
            margin-bottom:0px;
          }
        }
      }
    }
  }
  .bot {
    direction: ltr;
    padding-left: 41px;
    margin-top: 30px;
    font-size: 12px;
    color: #6e6d7a;
    width:240px;
    .contact-img-code {
      display: flex;
      align-items: center;
      grid-gap:18px;
      > div {
        width: 45px;
        height: 45px;
      }
      .wx {
        background:url('../assets/pro/leftNav/wx_icon.svg') no-repeat;
        background-size:45px;
        width:45px;height:45px;
        &:hover{
          background:url('../assets/pro/leftNav/wx_icon_active.svg') no-repeat;
          .qr-codes{
            opacity:1;
            z-index:1;
            visibility: visible;
          }
        }
        position: relative;
        .qr-codes{
          transition:.1s all linear;
          position: absolute;
          width:175px;height:112px;
          border-radius:8px;
          padding:10px 10px 0px 10px;
          box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.5);
          background:#1C1C1E;
          bottom:45px;
          display: flex;
          align-items: center;
          opacity:0;
          z-index:-1;
          visibility: hidden;
          span{
            width:70px;
            text-align: center;
            overflow: hidden;
            img{
              
            border-radius:3px;
            }
            i{
              font-style: normal;
              font-size:12px;
              color:#6E6D7A;
              line-height:20px;
              margin-top:5px;
            }
            &:last-child{
              margin-left:15px;
            }
          }
        }
      }
      .sina{
        background:url('../assets/pro/leftNav/sina_icon.svg') no-repeat;
        background-size:45px;
        width:45px;
        height:45px;
        &:hover{
          background:url('../assets/pro/leftNav/sina_icon_active.svg') no-repeat;
        }
      }
      .xiaohongshu{
        background:url('../assets/pro/leftNav/xiaohongshu.svg') no-repeat;
        background-size:45px;
        width:45px;height:45px;
        &:hover{
          background:url('../assets/pro/leftNav/xiaohongshu_active.svg') no-repeat;
        }
      }
      margin-bottom: 20px;
    }
    .target-a {
      a {
        margin-right: 20px;
        line-height: 23px;
        color:#6e6d7a;
      }
    }
    .mt-10 {
      margin-top: 10px;
    }
  }
  &::-webkit-scrollbar {
      display: none;
      width: 6px;
      height: 6px;
      background: transparent;
  }
  &::-webkit-scrollbar-button {
      display: none;
  }
  &::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, .3);
      border-radius: 16px;
  }
  &::-webkit-scrollbar-track {
      background: transparent;
  }

  .collapse-nav{
    display: none;
  }
}
</style>